<!DOCTYPE html>
<html>
<head>
    <title>下拉菜单实例|菜鸟教程(runoob.com)</title>
    <meta charset="utf-8">


        <style>
        body,p{margin: 0;}
        body,html,.parent{height: 100%;}
        .top,.bottom{
            position: absolute;
            height:50px;
            left: 0;
            right: 0;
        }
        .top{top: 0;}
        .bottom{bottom: 0;}
        .middleWrap{
            height: 100%;
            overflow: hidden;
        }
        .middle{
            overflow: hidden;
            height: 100%;
            margin: 50px 0;
        }
        .left{
            float: left;
            width: 100px;
            margin-right: 20px;
            height: 100%;
        }
        .right{
            overflow: auto;
            height: 100%;
        }
        .right-in{
            height: 1000px;
        }
    </style>

</head>
<body>
<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="top" style="background-color: lightblue;">
        <p>top</p>
    </div>
    <div class="middleWrap">
        <div class="middle" style="background-color: pink;">
            <div class="left" style="background-color: orange;">
                <p>left</p>
            </div>
            <div class="right" style="background-color: lightsalmon;">
                <div class="right-in">
                    <p>right</p>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom" style="background-color: lightgreen;">
        <p>bottom</p>
    </div>
    <table>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td rowspan="2">1</td><td>1</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>5</td></tr>
    </table>
</div>

</body>
</html>